<template>
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">季度名称</span>
      <el-input
        class="update-input mr-8"
        v-model.trim="requestData.name"
        clearable
        @clear="getQuarterList"
      ></el-input>
      <span class="mr-8">是否当季</span>
      <el-select
        class="update-el-select"
        v-model="requestData.inSeason"
        placeholder="请选择"
        clearable
        @clear="handleSearch"
      >
        <el-option
          v-for="item in typeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          clearable
        >
        </el-option>
      </el-select>
    </div>
    <div class="bottom_wrap pt-16">
      <el-button type="primary" @click="isAddQuarter = true">新增</el-button>
      <el-button @click="handleSearch">查询</el-button>
      <el-button @click="deleteRow">删除</el-button>
    </div>
    <div class="table_wrap">
      <el-table
        :data="quarterList"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '26px' }"
        @cell-click="handleRowClick"
        highlight-current-row
        height="68vh"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="季度名称" width="180">
        </el-table-column>
        <el-table-column prop="address" label="是否当季">
          <template slot-scope="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.inSeason"
              active-color="#017aff"
              inactive-color="#DCDFE6"
              @change="updateStatus(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增 -->
    <AddQuarter
      v-if="isAddQuarter"
      @hanldeCloseClerk="hanldeCloseClerk"
      @updateList="handleSearch"
    ></AddQuarter>
  </div>
</template>

<script>
import {
  getQuarterList,
  getByConditionQuarterList,
  addQuarter,
  getQuarterShow,
  quarterChange,
  updateQuarterStatus,
  deleteQuarter
} from '@/request/baseInfo/K_QuarterDoc'

import AddQuarter from './childComps/AddQuarter.vue'

import { turnToString } from '@/util/util'

export default {
  components: { AddQuarter },
  data() {
    return {
      typeList: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 0,
          label: '否'
        }
      ],
      requestData: {
        name: '',
        inSeason: null
      },
      quarter: '',
      quarterRow: {},
      quarterList: [],
      isQuarter: true,
      isAddQuarter: false
    }
  },
  created() {
    this.getQuarterList()
  },
  methods: {
    // 获取所有季度
    async getQuarterList() {
      const { data } = await getQuarterList()
      if (data && data.code === 200) {
        this.quarterList = data.data
      }
    },
    // 删除
    deleteRow() {
      let row = turnToString(this.quarterRow)
      if (row == '{}') return this.$message.error('请选择要删除的数据')
      row = JSON.parse(row)
      this.$confirm('是否删除该季度, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await deleteQuarter(row.id)
          if (data && data.code === 200) {
            this.$message.success('删除成功')
            this.getQuarterList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查询
    async handleSearch() {
      const { data } = await getByConditionQuarterList(this.requestData)
      if (data && data.code === 200) {
        this.quarterList = data.data
        // console.log(this.quarterList)
      }
    },
    // 更新季度的状态
    async updateStatus(row) {
      let requestData = {
        id: row.id,
        inSeason: row.inSeason
      }
      const { data } = await updateQuarterStatus(requestData)
      if (data && data.code === 200) {
        this.$message.success(data.msg)
        this.getQuarterList()
      }
      // console.log(data)
    },
    // 选择当前行
    handleRowClick(row) {
      // console.log(row)
      this.quarterRow = row
    },
    hanldeCloseClerk() {
      this.isAddQuarter = !this.isAddQuarter
    }
  }
}
</script>

<style lang="less" scoped>
.table_wrap {
  margin-top: 16px;
}
</style>
